import React from "react";
import { Form, Input, Button, Row, Col } from "antd";
import { UserOutlined, LockOutlined, LoadingOutlined, VerifiedOutlined } from "@ant-design/icons";
import ProBox from 'vendor/components/pro-box';
import { useThemeToken } from "@/constants";
import { useLogin } from './useLogin';

const Login: React.FC = () => {
  const { themeToken } = useThemeToken();
  const { loading, BgImg, submitting, canvasRef, handleSubmit, form, captchaImageInfo, fetchCaptchaImage } = useLogin();

  return <ProBox loading={loading}>
    <div id="backgroundBox" className="login-container">
      <canvas ref={canvasRef} />
      <div className="content">
        <Form form={form}>
          <div className="logo">
            <span style={{ fontSize: 25, fontWeight: 500 }}>登录</span>
          </div>
          <Form.Item
            name="loginName"
            rules={[{ required: true, whitespace: true, message: '请填写用户名或手机号!' }]}
          >
            <Input
              size="large"
              autoFocus={true}
              prefix={<UserOutlined />}
              placeholder="用户名或手机号"
              onKeyDown={handleSubmit}
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, whitespace: true, message: '请填写密码!' }]}
          >
            <Input.Password
              size="large"
              prefix={<LockOutlined />}
              placeholder="密码"
              onKeyDown={handleSubmit}
            />
          </Form.Item>
          <Form.Item
            name="code"
            rules={[{ required: true, whitespace: true, message: '请填写验证码!' }]}
          >
            <Row gutter={5} align="middle">
              <Col span={18}>
                <Input
                  size="large"
                  prefix={<VerifiedOutlined />}
                  placeholder="验证码"
                  onKeyDown={handleSubmit}
                />
              </Col>
              <Col span={6}>
                <img src={captchaImageInfo.img}
                  style={{ width: "100%", height: 37, cursor: "pointer" }}
                  onClick={fetchCaptchaImage}
                />
              </Col>
            </Row>
          </Form.Item>
          <Form.Item>
            <Button
              size="large"
              type="primary"
              style={{ width: "100%" }}
              onClick={handleSubmit}
              icon={submitting && <LoadingOutlined />}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>

      {/*language=SCSS*/}
      <style jsx>{`
        .login-container {
          user-select: none;
          height: 100%;
          overflow: hidden;
          position: relative;
          background-image: url(${BgImg});
          background-size: 100% 100%;

          .content {
            position: absolute;
            background-color: ${themeToken.colorBgContainer};
            left: 50%;
            top: 50%;
            width: 30%;
            padding: 30px 30px 0 30px;
            transform: translate(-50%, -60%);
            box-shadow: 0 0 10px 2px rgba(40, 138, 204, 0.16);
            border-radius: 3px;

            .logo {
              width: 100%;
              text-align: center;
              padding-bottom: 5px;
            }
          }
        }
      `}</style>
    </div>
  </ProBox>
}

export default Login;

